<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <title>简单示例 - JRoll</title>
  <link rel="stylesheet" href="_.css">
  <!--<script src="../build/jroll.min.js"></script>-->
  <script src="../src/jroll.js"></script>
</head>
<body>
  <div id="index">
    <div id="wrapper">
      <ul id="scroller"></ul>
    </div>
    <ul id="btns">
			<!--<li>
				<input type="checkbox" checked>
				<span>scroll</span>
			</li>-->
			<li>
				<input type="checkbox">
				<span>scrollX</span>
			</li>
			<li>
				<input type="checkbox" checked>
				<span>scrollY</span>
			</li>
			<li>
				<input type="checkbox">
				<span>scrollFree</span>
			</li>
			<li>
				<input type="checkbox">
				<span>zoom</span>
			</li>
			<li>
				<input type="checkbox" checked>
				<span>bounce</span>
			</li>
			<!-- 不可动态修改 <li>
				<input type="checkbox">
				<span>scrollBarX</span>
			</li>
			<li>
				<input type="checkbox" checked>
				<span>scrollBarY</span>
			</li>
			<li>
				<input type="checkbox">
				<span>scrollBarFade</span>
			</li>-->
			<li>
				<input type="checkbox" checked>
				<span>momentum</span>
			</li>
    </ul>
  </div>
  <script>
    var jroll = new JRoll("#wrapper", {id: "myJRoll", scrollBarY: true, scrollBarX: true});
    var scroller = document.getElementById("scroller");
		
		/*jroll.on("scrollStart", function() {
			console.log("start");
		});
		
		jroll.on("scroll", function() {
			console.log("scroll");
		});
		
		jroll.on("scrollEnd", function() {
			console.log("end");
		});
		
		jroll.on("refresh", function() {
			console.log("refresh");
		});
		
		jroll.on("touchEnd", function() {
			console.log("touchEnd");
		});*/
		
		function plusNum(a) {
			var i = 5;
			var b = String(a);
			while (i--) {
				b += b;
			}
			return b;
		}

    function createLi (num) {
      var str = "";
      for (var i=1; i<=num; i++) {
        // str += "<li>"+plusNum(i)+"</li>";
				str += "<li>"+i+"</li>";
      }
      scroller.innerHTML = str;
      jroll.refresh().scrollTo(0,0, 400);
    }

    createLi(800);
		
		//绑定checkbox的change事件
		var checks = document.querySelectorAll("#btns input");
		for (var j=0, l=checks.length; j<l; j++) {
			checks[j].onchange = function() {
				jroll.options[this.nextElementSibling.innerText] = this.checked;
			}
		}

  </script>
</body>
</html>